{include file="public/header296" /}
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
        <div class="layui-form-item">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入标题" value="{$item.name|default=''}" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">关联导航</label>
          <div class="layui-input-inline">
            <select name="nav_id">
              <option value="0">请选择关联的导航</option>
              {volist name="nav_list" id="vo"}
              <option value="{$vo.id}" {eq name="$item.nav_id" value="$vo.id"} selected{/eq}>{$vo.str|raw}{$vo.name}</option>
              {/volist}
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">内容</label>
          <div class="layui-input-block" id="editor-wrapper">
            <div id="toolbar-container"></div>
            <div id="editor-container"></div>
            <!-- 内容状态 -->
            <p style="background-color: #f1f1f1;">
              所有文字数: <span id="total-length"></span>；
              选中文字数: <span id="selected-length"></span>
            </p>
            <textarea name="content" id="editor-content" style="display: none">{$item.content|raw|default=''}</textarea>
          </div>
        </div>
        <div class="layui-form-item layui-hide">
          <input type="text" name="id" value="{$item.id}" />
          <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="编辑">
        </div>
      </div>
    </div>
  </div>
</div>
<script>
layui.use(['layer', 'form'], function(){
  var $ = layui.$
          ,form = layui.form;

  // 配置编辑器
  const { createEditor, createToolbar} = window.wangEditor
  const editorConfig = {
    placeholder: 'Type here',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)

      // 获取内容
      $("#editor-content").val(editor.getHtml())
      // 选中文字字数
      const selectionText = editor.getSelectionText()
      document.getElementById('selected-length').innerHTML = selectionText.length
      // 全部文字字数
      const text = editor.getText().replace(/\n|\r/mg, '')
      document.getElementById('total-length').innerHTML = text.length
    },
    // 上传图片配置
    MENU_CONF: {}
  }
  editorConfig.MENU_CONF['uploadImage'] = {
    server: '{:url("uploadFile/uploadPic")}',
    timeout: 5 * 1000,
    fieldName: 'file',
    meta: { token: 'xxx', path: 'picture' },
    metaWithUrl: true,
    headers: { Accept: 'text/x-json' },
    maxFileSize: 5 * 1024 * 1024,
    limit: 1,

    onSuccess(file, res) {
      console.log('onSuccess---', file, res)
    },
    onFailed(file, res) {
      console.log('onFailed---', file, res)
    },
    onError(file, err, res) {
      console.error('onError---', file, err, res)
    },
  }

  const editor = createEditor({
    selector: '#editor-container',
    html: '{$item.content|raw|default=""}',
    config: editorConfig,
    mode: 'default'
  })

  const toolbarConfig = {}
  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default'
  })
})
</script>
{include file="public/footer" /}